<!DOCTYPE HTML>
<html>
  <head>
    <title>XBeeManLite</title>
    <style>
      body {
        width: 800px;
      }

      h3, ul {
        margin: 10px 0 0 0;
      }

      #header {
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      #footer {
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-bottomright: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      #header, #footer {
        margin: 10px 0 0 20px;
        padding: 2px 5px;
        background: #338;
        color: #BEE;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }

      .red_bg { background: #F96; }
      .yel_bg { background: #FF6; }
      .grn_bg { background: #CF6; }
      .blu_bg { background: #CFF; }

      .left   { text-align: left; }
      .center { text-align: center; }
      .right  { text-align: right; }

      /*
       * Tab and Panel stuff
       */
      #main.tab_bar {
        margin: 10px 0 0 20px;
        padding: 0;
        list-style-type: none;
      }
      .tab {
        display: inline;
        margin: 0 3px 0 0;
        padding: 2px 5px 0 5px;
        border: 1px solid #338;
        border-bottom: 1px solid #333;
        background: #DDD;
      }
      .tab.selected {
        background: #FFF;
        border-bottom: 1px solid #FFF;
      }
      .tab:hover {
        background: #FFF;
      }

      .panel {
        display: none;              /* panels are by default hidden */
        margin: 0 0 10px 20px;
        border: 1px solid #333;
        padding: 0 10px 10px 10px;
      }
      .panel.selected {
        display: block;             /* expose (show) selected panel */
      }
      .panel.label {
        margin: 20px 0 0 0;
        font-weight: bold;
      }
      .panel.notes {
        margin: 10px 0 0 0;
        padding: 10px 0 0 0;
        border: none;
        border-top: 1px solid #333;
        font-size: 12px;
      }

      /*
       * subpanel stuff
       */
      .subpanel {
        margin: 20px 0 0 0;
        border: 1px dotted #333;
        font-size: 12px;
      }
      .subpanel .heading {
        padding: 3px 3px 2px 3px;
        background: #DDD;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
      }
      .subpanel caption {
        text-align: left;
        font-size: 14px;
        font-weight: bold;
      }
      .spacer {
        width: 5px;
        background: #DDD;
      }

      /*
       * module pinout stuff
       */
      .pin.post {
        border: 1px dotted #000;
        text-align: center;
      }
      .pin.name {
        width: 130px;
        padding: 0 10px 0 10px;
      }
      .pin.assignment {
        padding: 0 10px 0 10px;
      }
      .low.assrt {
        border-top: 1px solid #000;
      }

      #atcmdline {
        font-family: monospace;
      }

      .modified {
        background: #FF6;
      }

      .param {
        font-family: monospace;
        font-size: 12px;
      }

    </style>
  </head>

  <body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
    </script>

    <div id="header">XBeeManLite</div>

    <ul id="main" class="tab_bar">
      <li id="start" class="tab selected"
        title="Start here">
        Start
      </li>
      <li id="config" class="tab"
        title="Module configuration management">
        Configuration
      </li>
      <li id="cmdline" class="tab"
        title="AT Command Line">
        Command Line
      </li>
      <li id="about" class="tab"
        title="Information about this release of XBeeManLite">
        About
      </li>
    </ul>

    <div id="start" class="panel">
      <h3>Start Panel</h3>
      <p>
        XBeeManLite AppliPage to simplify generation
        of "AT" command strings to configure
        <a href="http://www.google.com/search?q=XBee"><b>XBee</b></a> modules.
      </p>
      &oplus; &otimes; &times; &minus; + &diams; &curren; &crarr;
    </div>

    <div id="config" class="panel">
      <h3>XBee Module Configuration</h3>

      <table class="subpanel">
        <caption>Networking</caption>
        <tr>
          <th class="heading" colspan="3" rowspan="2"
            title="Node Identifier (name given to a module)">
            Node Identifier
          </th>
          <th class="heading" rowspan="2">Chanel</th>
          <th class="heading" rowspan="2">PAN<br />ID</th>
          <th class="heading" colspan="2">Dest'n Address</th>
          <th class="heading" rowspan="2">Module<br />Address</th>
        </tr>
        <tr>
          <th class="heading">High</th>
          <th class="heading">Low</th>
        </tr>
        <tr>
          <td colspan="3">
            <input id="NI" class="param" type="text" size="20"
              title="NI: max 20 char ASCII string (Default: space)"
              name="NI" value="" />
          </td>
          <td class="right">
            <input id="CH" class="param right" type="text" size="2"
              title="CH: 0B-1A (Default: 0C)"
              name="CH" value="" />
          </td>
          <td class="right">
            <input id="ID" class="param right" type="text" size="4"
              title="ID: 0-FFFE (Default: 3332)"
              name="ID" value="" />
          </td>
          <td class="right">
            <input id="DH" class="param right" type="text" size="4"
              title="DH: 0-FFFF (Default: 0)"
              name="DH" value="" />
          </td>
          <td class="right">
            <input id="DL" class="param right" type="text" size="4"
              title="DL: 0-FFFF (Default: 0)"
              name="DL" value="" />
          </td>
          <td class="right">
            <input id="MY" class="param right" type="text" size="4"
              title="MY: 0-FFFE (Default: 0)"
              name="MY" value="" />
          </td>
        </tr>
      </table>

      <table class="subpanel">
        <caption>I/O Settings</caption>
        <tr>
          <th class="heading"
            title="Enable pull-up resistor (Default: enabled)">P/U</th>
          <th class="heading">Assignment</th>
          <th class="heading">Pin</th>
          <th class="heading">Name</th>
          <th class="heading">Name</th>
          <th class="heading">Pin</th>
          <th class="heading">Assignment</th>
          <th class="heading"
            title="Enable pull-up resistor (Default: enabled)">P/U</th>
          <th class="heading"
            title="Enable DIO change detect (Default: disabled)">C/D</th>
        </tr>

        <tr>
          <td> </td>
          <td class="pin 1 assignment right">Power (+)</td>
          <td class="pin 1 post">1</td>
          <td class="pin 1 name left">VCC</td>
          <td class="pin 20 name right">AD0 / DIO0</td>
          <td class="pin 20 post">20</td>
          <td class="left">
            <select id="D0" class="pin 20 param" name="D0"
              title="D0: 0,2-5">
              <option value="0">DISABLED &sup2;</option>
              <option value="2">ANALOG INPUT</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
            </select>
          </td>
          <td class="center">
            <input class="pu 0" type="checkbox" name="pu0" checked="checked"
              title="PR: xxx1xxxx" />
          </td>
          <td class="center">
            <input class="cd 0" type="checkbox" name="cd0"
              title="IC: xxxxxxx1" />
          </td>
        </tr>

        <tr>
          <td> </td>
          <td class="pin 2 assignment right">UART Data Output</td>
          <td class="pin 2 post">2</td>
          <td class="pin 2 name left">DOUT</td>
          <td class="pin 19 name right">AD1 / DIO1</td>
          <td class="pin 19 post">19</td>
          <td class="left">
            <select id="D1" class="pin 19 param" name="D1"
              title="D1: 0,2-5">
              <option value="0">DISABLED &sup2;</option>
              <option value="2">ANALOG INPUT</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
            </select>
          </td>
          <td class="center">
            <input class="pu 1" type="checkbox" name="pu1" checked="checked"
              title="PR: xxxx1xxx" />
          </td>
          <td class="center">
            <input class="cd 1" type="checkbox" name="cd1"
              title="IC: xxxxxx1x" />
          </td>
        </tr>

        <tr>
          <td class="center">
            <input class="pu i" type="checkbox" name="pui" checked="checked"
              title="PR: 1xxxxxxx" />
          </td>
          <td class="pin 3 assignment right">UART Data Input</td>
          <td class="pin 3 post">3</td>
          <td class="pin 3 name left">DIN / <b class="low assrt">CONFIG</b></td>
          <td class="pin 18 name right">AD2 / DIO2</td>
          <td class="pin 18 post">18</td>
          <td class="left">
            <select id="D2" class="pin 18 param" name="D2"
              title="D2: 0,2-5">
              <option value="0">DISABLED &sup2;</option>
              <option value="2">ANALOG INPUT</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
            </select>
          </td>
          <td class="center">
            <input class="pu 2" type="checkbox" name="pu2" checked="checked"
              title="PR: xxxxx1xx" />
          </td>
          <td class="center">
            <input class="cd 2" type="checkbox" name="cd2"
              title="IC: xxxxx1xx" />
          </td>
        </tr>

        <tr>
          <td> </td>
          <td class="pin 4 assignment right">Digital Output 8 &sup1;</td>
          <td class="pin 4 post">4</td>
          <td class="pin 4 name left">DO8</td>
          <td class="pin 17 name right">AD3 / DIO3</td>
          <td class="pin 17 post">17</td>
          <td class="left">
            <select id="D3" class="pin 17 param" name="D3"
              title="D3: 0,2-5">
              <option value="0">DISABLED &sup2;</option>
              <option value="2">ANALOG INPUT</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
            </select>
          </td>
          <td class="center">
            <input class="pu 3" type="checkbox" name="pu3" checked="checked"
              title="PR: xxxxxx1x" />
          </td>
          <td class="center">
            <input class="cd 3" type="checkbox" name="cd3"
              title="IC: xxxx1xxx" />
          </td>
        </tr>

        <tr>
          <td> </td>
          <td class="pin 5 assignment right">Module Reset Input &sup3;</td>
          <td class="pin 5 post">5</td>
          <td class="pin 5 name left"><b class="low assrt">RESET</b></td>
          <td class="pin 16 name right"><b class="low assrt">RTS</b> / DIO6</td>
          <td class="pin 16 post">16</td>
          <td class="left">
            <select id="D6" class="pin 16 param" name="D6"
              title="D6: 0,1,3-5">
              <option value="0">DISABLED &sup2;</option>
              <option value="1">RTS FLOW CTRL</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
            </select>
          </td>
          <td class="center">
            <input class="pu 6" type="checkbox" name="pu6" checked="checked"
              title="PR: xx1xxxxx" />
          </td>
          <td class="center">
            <input class="cd 6" type="checkbox" name="cd6"
              title="IC: x1xxxxxx" />
          </td>
        </tr>

        <tr>
          <td> </td>
          <td class="right">
            <select id="P0" class="pin 6 param" name="P0"
              title="P0: 0,1,3">
              <option value="0">DISABLED</option>
              <option value="1" selected="selected">RSSI &sup2;</option>
              <option value="2">PWM OUTPUT</option>
            </select>
          </td>
          <td class="pin 6 post">6</td>
          <td class="pin 6 name left">PWM0 / RSSI</td>
          <td class="pin 15 name right">ASSOC / AD5 / DIO5</td>
          <td class="pin 15 post">15</td>
          <td class="left">
            <select id="D5" class="pin 15 param" name="D5"
              title="D5: 0-5">
              <option value="0">DISABLED</option>
              <option value="1" selected="selected">ASSOC'N &sup2;</option>
              <option value="2">ANALOG INPUT</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
            </select>
          </td>
          <td> </td>
          <td class="center">
            <input class="cd 5" type="checkbox" name="cd5"
              title="IC: xx1xxxxx" />
          </td>
        </tr>

        <tr>
          <td> </td>
          <td class="right">
            <select id="P1" class="pin 7 param" name="P1"
              title="P1: 0,1,2">
              <option value="0">DISABLED &sup2;</option>
              <option value="1">RSSI</option>
              <option value="2">PWM OUTPUT</option>
            </select>
          </td>
          <td class="pin 7 post">7</td>
          <td class="pin 7 name left">PWM1</td>
          <td class="pin 14 name right">VREF</td>
          <td class="pin 14 post">14</td>
          <td class="pin 14 assignment left">Voltage Reference Input</td>
          <td> </td>
        </tr>

        <tr>
          <td> </td>
          <td class="pin 8 assignment right"><b>NO CONNECT  &sup1;</b></td>
          <td class="pin 8 post">8</td>
          <td class="pin 8 name left">RESERVED</td>
          <td class="pin 13 name right">ON / <b class="low assrt">SLEEP</b></td>
          <td class="pin 13 post">13</td>
          <td class="pin 13 assignment left">Module Status Output</td>
          <td> </td>
        </tr>

        <tr>
          <td class="center">
            <input class="pu 8" type="checkbox" name="pu8" checked="checked"
              title="PR: x1xxxxxx" />
          </td>
          <td class="right">
            <select id="D8" class="pin 9 param" name="D8"
              title="D8: 0,3">
              <option value="0">DISABLED &sup2;</option>
              <option value="3">INPUT</option>
            </select>
          </td>
          <td class="pin 9 post">9</td>
          <td class="pin 9 name left">
            <b class="low assrt">DTR</b> / SLEEP_RQ / DI8
          </td>
          <td class="pin 12 name right"><b class="low assrt">CTS</b> / DIO7</td>
          <td class="pin 12 post">12</td>
          <td class="left">
            <select id="D7" class="pin 12 param" name="D7"
              title="D7: 0,1,3-7">
              <option value="0">DISABLED</option>
              <option value="1" selected="selected">CTS FLOW CTRL &sup2;</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
              <option value="6">RS485 TX LOW</option>
              <option value="7">RS485 TX HIGH</option>
            </select>
          </td>
          <td> </td>
          <td class="center">
            <input class="cd 7" type="checkbox" name="cd7"
              title="IC: 1xxxxxxx" />
          </td>
        </tr>

        <tr>
          <td> </td>
          <td class="pin 10 assignment right">Ground (-)</td>
          <td class="pin 10 post">10</td>
          <td class="pin 10 name left">GND</td>
          <td class="pin 11 name right">AD4 / DIO4</td>
          <td class="pin 11 post">11</td>
          <td class="left">
            <select id="D4" class="pin 11 param" name="D4"
              title="D4: 0,2-5">
              <option value="0">DISABLED &sup2;</option>
              <option value="2">ANALOG INPUT</option>
              <option value="3">INPUT</option>
              <option value="4">OUTPUT LOW</option>
              <option value="5">OUTPUT HIGH</option>
            </select>
          </td>
          <td class="center">
            <input class="pu 4" type="checkbox" name="pu4" checked="checked"
              title="PR: xxxxxxx1" />
          </td>
          <td class="center">
            <input class="cd 4" type="checkbox" name="cd4"
              title="IC: xxx1xxxx" />
          </td>
        </tr>
      </table>

      <table class="subpanel">
        <tr>
          <th class="heading" colspan="2">Sampling</th>
          <th class="heading" rowspan="2">I/O Input Address</th>
          <th class="heading" rowspan="2">Change<br />Detect</th>
          <th class="heading" rowspan="2">Pull-Up<br />Resistors</th>
        </tr>
        <tr>
          <th class="heading">Rate</th>
          <th class="heading">BeforeTX</th>
        </tr>
        <tr>
          <td class="right">
            <input id="IR" class="param right" type="text" size="4"
              title="IR: 14-FFFF (Default: 0)"
              name="IR" value="" />
          </td>
          <td class="right">
            <input id="IT" class="param right" type="text" size="4"
              title="IT: 01-FF (Default: 1)"
              name="IT" value="" />
          </td>
          <td class="right">
            <input id="IA" class="param right" type="text" size="16"
              title="IA: 0-FFFFFFFFFFFFFFF (Default: 1)"
              name="IA" value="FFFFFFFFFFFFFFF" />
          </td>
          <td class="right">
            <input id="IC" class="param right" type="text" size="2"
              title="IC: 0-FF (Default: 0)"
              name="IC" value="0" />
          </td>
          <td class="right">
            <input id="PR" class="param right" type="text" size="2"
              title="PR: 0-FF (Default: FF)"
              name="PR" value="" />
          </td>
        </tr>
      </table>

      <table class="subpanel">
        <tr>
          <td>
            <button id="save" type="button"
              title="Save settings, ........">
              Save
            </button>
            <button id="load" type="button"
              title="Load settings from a file">
              Load
            </button>
            <button id="reset" type="button"
              title="Reset parameters to last imported (or loaded defaults)">
              Reset
            </button>
          </td>
        </tr>
      </table>

      <div id="config" class="panel notes">
        Notes:
        <ol>
          <li>Function not supported at this time,
            pin should not be connected.</li>
          <li>Default parameter value.</li>
          <li>Open-collector with pull-up resistor.</li>
        </ol>
      </div>
    </div>

    <div id="cmdline" class="panel">
      <table class="subpanel">
        <tr>
          <th class="heading">AT Command Line</th>
        </tr>
        <tr>
          <td>
            <input id="atcmdline" type="text" size="100"
              title="AT commands and parameters"
              value="" />
          </td>
        </tr>
      </table>

      <table class="subpanel">
        <tr>
          <td>
            <!--
            <button id="export" type="button" title="Export parameter values">
              Export
            </button>
            -->
            <button id="import" type="button" title="Import parameter values">
              Import
            </button>
          </td>
        </tr>
      </table>
    </div>

    <div id="about" class="panel">
      <h3>About</h3>
      <table class="subpanel">
        <tr><td><b>XBeeManLite</b></td></tr>
        <tr><td>Revision:</td><td>0.1</td></tr>
        <tr><td>Support:</td><td>steve@rozfam.net</td></tr>
      </table>
    </div>

    <div id="footer">. . . . .</div>

    <script>
      $(document).ready(function(){
        var StoredParams = new Object;
        StoredParams["NI"] = "";
        StoredParams["CH"] = "0C";
        StoredParams["IC"] = "0";
        StoredParams["ID"] = "3332";
        StoredParams["MY"] = "0";
        StoredParams["DH"] = "0";
        StoredParams["DL"] = "0";
        StoredParams["IR"] = "0";
        StoredParams["IT"] = "1";
        StoredParams["D0"] = "0";
        StoredParams["D1"] = "0";
        StoredParams["D2"] = "0";
        StoredParams["D3"] = "0";
        StoredParams["D4"] = "0";
        StoredParams["D5"] = "1";
        StoredParams["D6"] = "0";
        StoredParams["D7"] = "1";
        StoredParams["D8"] = "0";
        StoredParams["P0"] = "1";
        StoredParams["P1"] = "0";
        StoredParams["PR"] = "FF";

        var SessionParams = new Object;

        var BitMask = new Object;
        BitMask["1xxxxxxx"] = 0x80;
        BitMask["x1xxxxxx"] = 0x40;
        BitMask["xx1xxxxx"] = 0x20;
        BitMask["xxx1xxxx"] = 0x10;
        BitMask["xxxx1xxx"] = 0x08;
        BitMask["xxxxx1xx"] = 0x04;
        BitMask["xxxxxx1x"] = 0x02;
        BitMask["xxxxxxx1"] = 0x01;

        function Reset() {
          $(".pin.post").removeClass("modified");
          $(".pu").attr("checked", true);
          $(".cd").attr("checked", false);
          $("#atcmdline").val("");
          SessionParams = [];
          for (atcmd in StoredParams) {
            $("#" + atcmd).val(StoredParams[atcmd]);
            $("#" + atcmd).removeClass("modified");
          }
        }

        /*
         * Initial setup
         */
        $(".tab").removeClass("selected");
        $(".panel").hide();
        $("#start.tab").addClass("selected");
        $("#start.panel").show();
        Reset();

        $(".tab").click(function(){
          /*
           * deselect all tabs and hide all panels
           */
          $(".tab").removeClass("selected");
          $(".panel").hide();
          /*
           * select target tab and show target panel
           */
          var id = $(this).attr("id");
          $("#"+id+".tab").addClass("selected");
          $("#"+id+".panel").show();
        });

        $(".param").change(function(){
          var atcmd = $(this).attr("id");
          var param = $(this).val().trim();

          var class_entries = $(this).attr("class").split(" ");
          if (class_entries[0] == "pin") {
            var target = ".pin." + class_entries[1] + ".post";
          }
          else {
            var target = "#" + atcmd;
          }

          if (param != StoredParams[atcmd]) {
            SessionParams[atcmd] = param;
            $(target).addClass("modified");
          }
          else {
            delete SessionParams[atcmd];
            $(target).removeClass("modified");
          }

          var atcmdline = "";
          for (atcmd in StoredParams) {
            if (atcmd in SessionParams) {
              atcmdline = atcmdline + atcmd + " " + SessionParams[atcmd] + ",";
            }
          }
          $("#atcmdline").val(atcmdline);
        });

        /*
        $("#export").click(function(){
          var ew = window.open("","","width=500,height=500");
          ew.document.write("<pre>\n");
          for (atcmd in SessionParams) {
            ew.document.write(atcmd + ": " +  SessionParams[atcmd] + "\n");
          }
          ew.document.write("</pre>\n");
          ew.focus();
        });
        */

        $("#reset").click(function(){
          Reset();
        });

        $(".pu").change(function(){
          var title = $(this).attr("title");
          var n = BitMask[title.split(" ")[1]];
          if (SessionParams.hasOwnProperty("PR")) {
            if ($(this).attr("checked")) {
              SessionParams["PR"] -= n;
            }
            else {
              SessionParams["PR"] += n;
            }
          }
          else {
            SessionParams["PR"] = n;
          }
          var $target = $("#PR");
          $target.val(SessionParams["PR"].toString(16).toUpperCase());
          $target.addClass("modified");
        });

        $(".cd").change(function(){
          var n = BitMask[$(this).attr("title").split(" ")[1]];
          if ($(this).attr("checked")) {
            SessionParams["IC"] += n;
          }
          else {
            SessionParams["IC"] -= n;
          }
          var $target = $("#IC");
          $target.val(SessionParams["IC"].toString(16).toUpperCase());
          $target.addClass("modified");
        });

      });
    </script>
  </body>
</html>
